<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-警告，信息确认，通知组件</title>
    <!--Vue必须放上面-->
    <script src="../js/vue.js"></script>
    <!--ElementUi-->
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <!--以前弹框VS现在弹框-->
        <button @click="fun1">点我弹框1</button>
        <hr>
        <button @click="fun2">点我弹框2</button>
        <hr>
        <button @click="fun3">点我查看信息</button>
        <hr>
        <button @click="fun4">点我删除</button>
        <hr>
        <button @click="fun5">点我发送群通知</button>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                user:{
                    name:"jack",
                    age:19,
                    score:99.5,
                }
            },
            methods: {
                fun1:function () {
                    window.alert("您确定要删除吗？");
                },
                fun2:function () {
                    // 警告框
                    this.$alert("您确定要删除吗？","温馨提示");
                },
                fun3:function () {
                    // 信息框
                    this.$message({
                        // 关闭弹框的属性
                        showClose:true,
                        title:"学生信息展示",
                        // 弹框的信息展示
                        message:"姓名："+this.user.name,
                        // 弹框的样式
                        type:"success",
                    });
                },
                fun4:function () {
                    // 确认框
                    this.$confirm("您确定删除吗？")
                        .then( // 点了确定
                            ()=>{
                                this.$message({
                                    showClose:true,
                                    title:"确定",
                                    message:"删除学生信息成功！",
                                    type:"success",
                                });
                            }
                        )
                        .catch( // 点了取消
                            ()=>{
                                this.$message({
                                    showClose:true,
                                    title:"取消",
                                    message:"删除学生信息失败！",
                                    type:"danger",
                                });
                            }
                        )
                },
                fun5:function () {
                    // 通知框
                    this.$notify({
                        showClose:true,
                        title:"退群",
                        message:"小踩踩从J2403群退出！",
                        type:"warning"
                    });
                }
            }
        });
    </script>
</body>
</html>